<template>
	<view>
		<block v-if="pageData.length">
		<view class="viewbox auto">
			<view class="row a-center m-bot30" v-for="(item,index) in pageData" :key="index">
				<view class="rankNum flexac color_66 size30 bold m-right20">
					<image :src="$online(`${index+1}.png`)" class="rankNum" v-if="index <= 2"></image>
					<text v-else>{{index+1}}</text>
				</view>
				<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="user_img bor_radius m-right20"></image>
				<view class="flex-1 d-flex f-column ">
					<text class="color_33 size28">{{item.v_name}}</text>
					<text class="color_66 size22">{{item.department}}</text>
				</view>
				<view class="d-flex f-column a-end ">
					<text class="color_66 size22">进度 {{item.percent}}%</text>
					<view class="progor m-top10">
						<view class="schPro" :style="{width:item.percent+'%'}"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBar" >
			<view class="botBtn flexac" v-if="rank && !all">
				<view class="look flexac white">
					<text class="size32">我在第</text>
					<text class="size38 bold m-left6 m-right6">{{rank}}</text>
					<text class="size32">名</text>
				</view>
				<!-- <view class="look flexac white size32">加载更多</view> -->
			</view>
		</view>
		</block>
		<emptys v-else></emptys>
	</view>
</template>

<script>
	export default {
		name: 'ranking',
		props: ['pageData', 'rank','all'],
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.rankNum {
		width: 58rpx;
		height: 70rpx;
	}

	.user_img {
		width: 70rpx;
		height: 70rpx;
	}

	.progor {
		width: 160rpx;
		height: 10rpx;
		background: #E4E4E4;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}

	.schPro {
		height: 100%;
		background-color: #FF5255;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bottomBar {
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.botBtn {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 77777;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.look {
		width: 690rpx;
		height: 70rpx;
		background-color: #F95652;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>